<template>
    <div class="msg-box">
        <div class="msg-body">
            <svg t="1569721713120" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2469" width="200" height="200">
                <path d="M422.4 750.933333 422.4 750.933333 422.4 750.933333zM512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0zM512 960C264.533333 960 64 759.466667 64 512S264.533333 64 512 64 960 264.533333 960 512 759.466667 960 512 960zM693.0176 282.702507l51.28832 51.28832-410.30656 410.30656-51.28832-51.28832 410.30656-410.30656ZM282.702507 330.9824l51.28832-51.28832 410.30656 410.30656-51.28832 51.28832-410.30656-410.30656Z" p-id="2470" fill="#d81e06" />
            </svg>
            <p class="message">{{msg}}</p>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            msg: ""
        };
    }
};
</script>
<style scoped>
.msg-box {
    position: absolute;
    width: 100%;
    background-color: #ccc;
    height: 100%;
}
.msg-body {
    width: 160px;
    height: 160px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    overflow: hidden;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 10px;
}
svg {
    width: 100px;
    height: 100px;
    background-color: white;
}
.message {
    height: 30px;
    line-height: 30px;
    background-color: white;
    color: red;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top:10px;
    font-size:20px;
}
</style>